import React, { useState, useEffect, useRef, useCallback } from "react";
import { Row, Col, Form, message, Drawer, FloatButton, Button } from "antd";
import {
  MenuOutlined,
  SettingOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons";
import type { Color } from "antd/es/color-picker";
import axios from "axios";
import ProjectConfigFormTree from "@/components/create-project/ProjectConfigFormTree";
import VideoPreviewPanel from "@/components/create-project/VideoPreviewPanel";
import ConfigDetailPanel from "@/components/create-project/ConfigDetailPanel";
import TourGuide from "@/components/create-project/TourGuide";
import TemplateList from "@/components/create-project/TemplateList";
import ProjectHeader from "@/components/create-project/ProjectHeader";
import AutoSaveIndicator from "@/components/create-project/AutoSaveIndicator";
import {
  useConfigManager,
  type AutoSaveStatus,
} from "@/components/create-project/ConfigManager";
import { useVideoMaterialManager } from "@/components/create-project/VideoMaterialManager";
import { useTextAnimationManager } from "@/components/create-project/animation-manager/AnimationManager";
import { buildProjectDataFromStorage, CONFIG_TYPES } from "@/utils/helpers";
import {
  canvasFields,
  hasSomeFieldsChanged,
  textAnimationFields,
  textBackgroundFields,
  textBasicFields,
  textBorderFields,
} from "@/utils/create-project";
import { default_project_config } from "@/config";
import { getSteps } from "@/config/steps";

const CreateProject: React.FC = () => {
  const [form] = Form.useForm();
  const [userId] = useState("default-user");
  const projectHeaderRef = useRef<any>();

  // 自动保存状态
  const [autoSaveStatus, setAutoSaveStatus] = useState<AutoSaveStatus>("idle");

  // 使用配置管理器 这里可以拿到已经保存的状态
  const {
    configLoaded,
    debouncedSaveConfig,
    saveTextColorsConfig,
    loadSavedConfigs,
  } = useConfigManager({
    userId,
    onStatusChange: setAutoSaveStatus,
  });

  // 使用视频素材管理器
  const { videoMaterials, setVideoMaterials } = useVideoMaterialManager({
    onAutoSave: (materials) => {
      if (configLoaded) {
        debouncedSaveConfig(CONFIG_TYPES.VIDEO_MATERIALS, materials);
      }
    },
  });

  // 使用文本动画的Hooks去获取动画效果 文本的动画效果在animationData中
  const {
    animationData,
    loadingAnimations,
    introAnimation,
    outroAnimation,
    loopAnimation,
    setIntroAnimation,
    setOutroAnimation,
    setLoopAnimation,
  } = useTextAnimationManager();

  // 状态定义
  const [drawerVisible, setDrawerVisible] = useState(false);

  // 颜色状态
  const [textColor, setTextColor] = useState<Color | string>("#ffffff");
  const [borderColor, setBorderColor] = useState<Color | string>("#000000");
  const [backgroundColor, setBackgroundColor] = useState<Color | string>(
    "#000000",
  );

  // 右侧配置面板状态
  const [currentConfigType, setCurrentConfigType] = useState<string>("");
  const [currentConfigTitle, setCurrentConfigTitle] = useState<string>("");

  // 当前配置状态
  const [currentConfig, setCurrentConfig] = useState<any>(
    default_project_config,
  );

  // 引导教程状态
  const [showTour, setShowTour] = useState<boolean>(false);
  const [tourStep, setTourStep] = useState<number>(0);
  const [textPosition, setTextPosition] = useState<{ x: number; y: number }>({
    x: 100,
    y: 100,
  });
  const [isInitialLoading, setIsInitialLoading] = useState(true);
  // 引导教程步骤
  const tourSteps = getSteps();
  // 更新当前配置
  const updateCurrentConfig = useCallback(() => {
    const formValues = form.getFieldsValue();
    const newConfig = {
      canvas: {
        width: formValues.canvasWidth || 1920,
        height: formValues.canvasHeight || 1080,
        fps: formValues.canvasFps || 30,
      },
      text: {
        content: formValues.textContent || "生活是美好的，也是残酷的",
        startTime: formValues.textStartTime || 1,
        duration: formValues.textDuration || 8,
        fontSize: formValues.fontSize || 16,
        color:
          typeof textColor === "string"
            ? textColor
            : textColor?.toHexString?.() || "#ffffff",
        isBold: formValues.isBold || false,
        isItalic: formValues.isItalic || false,
        isUnderline: formValues.isUnderline || false,
        opacity: formValues.textOpacity || 0.95,
        align: formValues.textAlign || 1,
        letterSpacing: formValues.letterSpacing || 0,
        lineSpacing: formValues.lineSpacing || 0,
      },
      border: {
        color:
          typeof borderColor === "string"
            ? borderColor
            : borderColor?.toHexString?.() || "#000000",
        width: formValues.borderWidth || 0,
        opacity: formValues.borderOpacity || 0.8,
      },
      background: {
        color:
          typeof backgroundColor === "string"
            ? backgroundColor
            : backgroundColor?.toHexString?.() || "#000000",
        style: formValues.backgroundStyle || 0,
        opacity: formValues.backgroundOpacity || 0.7,
        width: formValues.backgroundWidth || 0.4,
        height: formValues.backgroundHeight || 0.2,
        horizontalOffset: formValues.horizontalOffset || 0.5,
        verticalOffset: formValues.verticalOffset || 0.6,
      },
      animations: {
        intro: {
          type: introAnimation,
          duration: formValues.introDuration || 1.5,
        },
        outro: {
          type: outroAnimation,
          duration: formValues.outroDuration || 1,
        },
        loop: { type: loopAnimation },
      },
      videos: videoMaterials.map((material, index) => ({
        path: material.material.path,
        startTime: material.start_time / 1000000,
        duration: material.duration / 1000000,
        layer: material.relative_index,
      })),
    };

    setCurrentConfig(newConfig);
  }, [
    form,
    textColor,
    borderColor,
    backgroundColor,
    introAnimation,
    outroAnimation,
    loopAnimation,
    videoMaterials,
  ]);

  // 处理配置类型变化
  const handleConfigTypeChange = (configType: string, title: string) => {
    setCurrentConfigType(configType);
    setCurrentConfigTitle(title);
  };

  // 1.组件初步挂载时的加载逻辑
  useEffect(() => {
    if (animationData && !loadingAnimations && !configLoaded) {
      loadSavedConfigs().then((savedConfig: VideoProjectConfig | null) => {
        console.log(`当前加载的配置: `, savedConfig);
        if (!savedConfig) {
          message.info("当前没有保存的配置，开始设计你的第一个视频吧！");
          setIsInitialLoading(false);
          return;
        }
        // TODO 这里貌似没有配置canvas 需要看一下
        // 如果配置了文本的颜色等
        if (savedConfig.textColors) {
          setTextColor(savedConfig.textColors.textColor);
          setBorderColor(savedConfig.textColors.borderColor);
          setBackgroundColor(savedConfig.textColors.backgroundColor);
        }
        if (savedConfig.videoMaterials) {
          setVideoMaterials(savedConfig.videoMaterials);
        }
        if (savedConfig.textAnimationSettings) {
          setIntroAnimation(
            savedConfig.textAnimationSettings.introAnimation || "渐显",
          );
          setOutroAnimation(
            savedConfig.textAnimationSettings.outroAnimation || "渐隐",
          );
          setLoopAnimation(
            savedConfig.textAnimationSettings.loopAnimation || "跳动",
          );
          form.setFieldsValue({
            introDuration:
              savedConfig.textAnimationSettings.introDuration || 1.5,
            outroDuration:
              savedConfig.textAnimationSettings.outroDuration || 1.0,
          });
        }
        // @ts-ignore
        if (savedConfig.textPosition) {
          // @ts-ignore
          setTextPosition(savedConfig.textPosition);
        }
        // 加载项目名称
        if (projectHeaderRef.current) {
          projectHeaderRef.current.loadProjectName();
        }
        setIsInitialLoading(false);
      });
    } else if (!animationData && !loadingAnimations && !configLoaded) {
      setIsInitialLoading(false);
    }
  }, [
    animationData,
    loadingAnimations,
    configLoaded,
    loadSavedConfigs,
    form,
    setVideoMaterials,
  ]);

  // 监听颜色变化时自动保存
  useEffect(() => {
    updateCurrentConfig();
    if (!isInitialLoading && configLoaded) {
      saveTextColorsConfig(textColor, borderColor, backgroundColor);
    }
  }, [
    textColor,
    borderColor,
    backgroundColor,
    updateCurrentConfig,
    saveTextColorsConfig,
    isInitialLoading,
    configLoaded,
  ]);

  // 监听动画变化时自动保存
  useEffect(() => {
    updateCurrentConfig();
    if (!isInitialLoading && configLoaded) {
      debouncedSaveConfig(CONFIG_TYPES.ANIMATION_SETTINGS, {
        introAnimation,
        outroAnimation,
        loopAnimation,
      });
    }
  }, [
    introAnimation,
    outroAnimation,
    loopAnimation,
    updateCurrentConfig,
    isInitialLoading,
    configLoaded,
  ]);

  // 处理表单变化 - 只在非初始加载状态时执行自动保存
  const handleFormChange = useCallback(
    (changedFields: any, allFields: any) => {
      console.log("表单变化:", changedFields, allFields);
      // 只在配置加载完成且非初始加载状态时才执行自动保存
      if (!isInitialLoading && configLoaded) {
        // 根据当前选中的配置类型进行自动保存
        const formValues = form.getFieldsValue();
        console.log("当前表单值:", formValues);
        // 如果是画布配置
        if (hasSomeFieldsChanged(changedFields, canvasFields)) {
          const canvasConfig = {
            width: formValues.canvasWidth || 1920,
            height: formValues.canvasHeight || 1080,
            fps: formValues.canvasFps || 30,
          };
          debouncedSaveConfig(CONFIG_TYPES.CANVAS, canvasConfig);
        }
        // 如果是文本配置
        if (hasSomeFieldsChanged(changedFields, textBasicFields)) {
          const textBasicConfig = {
            content: formValues.textContent || "生活是美好的，也是残酷的",
            startTime: formValues.textStartTime || 1,
            duration: formValues.textDuration || 8,
            fontSize: formValues.fontSize || 12,
            color:
              typeof textColor === "string"
                ? textColor
                : textColor.toHexString(),
            isBold: formValues.isBold || false,
            isItalic: formValues.isItalic || false,
            isUnderline: formValues.isUnderline || false,
            opacity: formValues.textOpacity || 0.95,
            align: formValues.textAlign || 1,
            letterSpacing: formValues.letterSpacing || 5,
            lineSpacing: formValues.lineSpacing || 8,
          };
          debouncedSaveConfig(CONFIG_TYPES.TEXT_BASIC, textBasicConfig);
        }
        // 如果是文本边框、背景或动画配置
        if (hasSomeFieldsChanged(changedFields, textBorderFields)) {
          const textBorderConfig = {
            color:
              typeof borderColor === "string"
                ? borderColor
                : borderColor.toHexString(),
            width: formValues.borderWidth || 45,
            opacity: formValues.borderOpacity || 0.8,
          };
          debouncedSaveConfig(CONFIG_TYPES.TEXT_BORDER, textBorderConfig);
        }
        // 如果是文本背景配置
        if (hasSomeFieldsChanged(changedFields, textBackgroundFields)) {
          const textBackgroundConfig = {
            color:
              typeof backgroundColor === "string"
                ? backgroundColor
                : backgroundColor.toHexString(),
            style: formValues.backgroundStyle || 2,
            opacity: formValues.backgroundOpacity || 0.7,
            width: formValues.backgroundWidth || 0.4,
            height: formValues.backgroundHeight || 0.2,
            horizontalOffset: formValues.horizontalOffset || 0.5,
            verticalOffset: formValues.verticalOffset || 0.6,
            roundRadius: formValues.roundRadius || 0.3,
          };
          debouncedSaveConfig(
            CONFIG_TYPES.TEXT_BACKGROUND,
            textBackgroundConfig,
          );
        }
        // 如果是文本动画配置
        if (hasSomeFieldsChanged(changedFields, textAnimationFields)) {
          const textAnimationConfig = {
            introAnimation,
            outroAnimation,
            loopAnimation,
            introDuration: formValues.introDuration || 1.5,
            outroDuration: formValues.outroDuration || 1,
          };
          debouncedSaveConfig(CONFIG_TYPES.TEXT_ANIMATION, textAnimationConfig);
        }
      }
    },
    [
      form,
      isInitialLoading,
      configLoaded,
      textColor,
      borderColor,
      backgroundColor,
      introAnimation,
      outroAnimation,
      loopAnimation,
      updateCurrentConfig,
      debouncedSaveConfig,
    ],
  );

  // 处理文本位置变化并保存
  const handleTextPositionChange = useCallback(
    (position: { x: number; y: number }) => {
      setTextPosition(position);

      // 自动保存位置配置
      if (!isInitialLoading && configLoaded) {
        const positionConfig = {
          x: position.x,
          y: position.y,
        };
        debouncedSaveConfig(CONFIG_TYPES.TEXT_POSITION, positionConfig);
      }
    },
    [isInitialLoading, configLoaded, debouncedSaveConfig],
  );

  // 处理屏幕适配
  const handleScreenAdapt = useCallback(() => {
    const width = window.screen.width;
    const height = window.screen.height;

    form.setFieldsValue({
      canvasWidth: width,
      canvasHeight: height,
    });

    const allFields = form.getFieldsValue();
    const changedFields = [
      { name: ["canvasWidth"], value: width },
      { name: ["canvasHeight"], value: height },
    ];

    handleFormChange(changedFields, allFields);
    message.success(`已适配当前屏幕分辨率：${width}×${height}`);
  }, [form, handleFormChange]);

  // 手动触发视频素材保存的回调函数
  const handleVideoMaterialAutoSave = useCallback(() => {
    if (!isInitialLoading && configLoaded) {
      debouncedSaveConfig(CONFIG_TYPES.VIDEO_MATERIALS, videoMaterials);
    }
  }, [debouncedSaveConfig, isInitialLoading, configLoaded, videoMaterials]);

  // 创建项目
  const createProject = async () => {
    try {
      console.log("从存储中构建项目数据...");
      const projectData = await buildProjectDataFromStorage(userId);
      // 验证视频素材
      const hasValidVideo = projectData.video_conf.video_materials.some(
        (material: any) => material.material.path.trim() !== "",
      );
      if (!hasValidVideo) {
        message.error("请至少配置一个有效的视频素材路径");
        return;
      }
      const response = await axios.post("/api/create-project", projectData);
      if (response.data.success) {
        message.success("项目创建成功！");
      } else {
        message.error("项目创建失败：" + response.data.message);
      }
    } catch (error) {
      message.error("创建项目失败，请检查配置");
    }
  };

  // 引导教程控制
  const handleSkipTour = () => {
    setShowTour(false);
    setTourStep(0);
  };

  const handleNextStep = () => {
    if (tourStep < tourSteps.length - 1) {
      setTourStep(tourStep + 1);
    } else {
      setShowTour(false);
      setTourStep(0);
    }
  };

  const handlePrevStep = () => {
    if (tourStep > 0) {
      setTourStep(tourStep - 1);
    }
  };

  // 渲染用户的个性自定义配置面板
  const renderUserCustomConfigPanel = () => {
    return (
      <div
        style={{
          minHeight: "calc(100vh - 64px)",
          maxHeight: "calc(100vh - 64px)", // 添加最大高度限制
          padding: "24px",
          overflow: "hidden", // 防止溢出
        }}
      >
        {/* 三栏布局 */}
        <Row
          gutter={[16, 16]}
          style={{
            height: "calc(100vh - 112px)",
            maxHeight: "calc(100vh - 112px)", // 添加最大高度限制
            overflow: "hidden", // 防止整体溢出
          }}
        >
          {/* 左侧：项目配置树 */}
          <Col xs={0} lg={6} xl={5}>
            <div
              id="step1"
              style={{
                height: "100%",
                maxHeight: "calc(100vh - 112px)",
                overflow: "hidden",
              }}
            >
              <ProjectConfigFormTree
                form={form}
                videoMaterials={videoMaterials}
                onFormChange={handleFormChange}
                onCreateProject={createProject}
                onConfigTypeChange={handleConfigTypeChange}
              />
            </div>
          </Col>

          {/* 中间：视频预览 */}
          <Col xs={24} lg={12} xl={14}>
            <div
              id="step2"
              style={{
                width: "100%",
                maxHeight: "calc(100vh - 112px)", // 限制中间面板高度
                overflow: "hidden",
                background:
                  "linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)", // 类似剪映的深色渐变背景
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                position: "relative",
                borderRadius: "8px", // 添加圆角
                border: "1px solid #3d3d3d", // 添加边框
                boxShadow: "inset 0 0 20px rgba(0, 0, 0, 0.3)", // 内阴影营造深度感
              }}
            >
              {/* 添加网格背景效果 */}
              <div
                style={{
                  position: "absolute",
                  top: 0,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  backgroundImage: `
                    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)
                  `,
                  backgroundSize: "20px 20px",
                  pointerEvents: "none",
                  zIndex: 0,
                }}
              />

              {/* 添加角落装饰 */}
              <div
                style={{
                  position: "absolute",
                  top: "10px",
                  right: "10px",
                  width: "100px",
                  height: "2px",
                  background:
                    "linear-gradient(90deg, transparent 0%, #4CAF50 50%, transparent 100%)",
                  borderRadius: "1px",
                  zIndex: 1,
                }}
              />
              <div
                style={{
                  position: "absolute",
                  bottom: "10px",
                  left: "10px",
                  width: "80px",
                  height: "2px",
                  background:
                    "linear-gradient(90deg, transparent 0%, #2196F3 50%, transparent 100%)",
                  borderRadius: "1px",
                  zIndex: 1,
                }}
              />

              {/* 视频预览面板 */}
              <div
                style={{
                  position: "relative",
                  zIndex: 2,
                  width: "100%",
                  height: "100%",
                }}
              >
                <VideoPreviewPanel
                  currentConfig={currentConfig}
                  textPosition={textPosition}
                  onTextPositionChange={handleTextPositionChange}
                />
              </div>
            </div>
          </Col>

          {/* 右侧：详细配置 */}
          <Col xs={0} lg={6} xl={5}>
            <div
              id="step3"
              style={{
                height: "100%",
                maxHeight: "calc(100vh - 112px)", // 限制右侧面板高度
                overflow: "hidden",
              }}
            >
              <ConfigDetailPanel
                form={form}
                configType={currentConfigType}
                configTitle={currentConfigTitle}
                textColor={textColor}
                borderColor={borderColor}
                backgroundColor={backgroundColor}
                introAnimation={introAnimation}
                outroAnimation={outroAnimation}
                loopAnimation={loopAnimation}
                animationData={animationData}
                loadingAnimations={loadingAnimations}
                videoMaterials={videoMaterials}
                textPosition={textPosition}
                onFormChange={handleFormChange}
                onTextColorChange={setTextColor}
                onBorderColorChange={setBorderColor}
                onBackgroundColorChange={setBackgroundColor}
                onIntroAnimationChange={setIntroAnimation}
                onOutroAnimationChange={setOutroAnimation}
                onLoopAnimationChange={setLoopAnimation}
                onVideoMaterialsChange={setVideoMaterials}
                onScreenAdapt={handleScreenAdapt}
                onAutoSave={handleVideoMaterialAutoSave}
                onTextPositionChange={handleTextPositionChange}
              />
            </div>
          </Col>
        </Row>

        {/* 移动端配置抽屉 */}
        <Drawer
          title="项目配置"
          placement="left"
          onClose={() => setDrawerVisible(false)}
          open={drawerVisible}
          width={window.innerWidth < 576 ? "90%" : "400px"}
          styles={{ body: { padding: 0 } }}
        >
          <div
            style={{
              padding: "16px",
              height: "100%",
              display: "flex",
              flexDirection: "column",
            }}
          >
            {/* 树形配置面板 */}
            <div style={{ flex: 1, marginBottom: "16px" }}>
              <ProjectConfigFormTree
                form={form}
                onFormChange={handleFormChange}
                videoMaterials={videoMaterials}
                onCreateProject={createProject}
                onConfigTypeChange={(configType: string, title: string) => {
                  // 处理配置类型变化
                  handleConfigTypeChange(configType, title);
                  // 可选：点击后自动关闭抽屉，让用户在主界面查看右侧配置面板
                  // setDrawerVisible(false);
                }}
              />
            </div>

            {/* 移动端下的详细配置区域 */}
            {currentConfigType && (
              <>
                <div
                  style={{
                    borderTop: "1px solid #f0f0f0",
                    paddingTop: "16px",
                    maxHeight: "40vh",
                    overflow: "auto",
                  }}
                >
                  <div
                    style={{
                      fontSize: "14px",
                      fontWeight: "bold",
                      marginBottom: "12px",
                      color: "#1890ff",
                    }}
                  >
                    {currentConfigTitle}
                  </div>
                  <ConfigDetailPanel
                    form={form}
                    configType={currentConfigType}
                    configTitle={currentConfigTitle}
                    textColor={textColor}
                    borderColor={borderColor}
                    backgroundColor={backgroundColor}
                    introAnimation={introAnimation}
                    outroAnimation={outroAnimation}
                    loopAnimation={loopAnimation}
                    animationData={animationData}
                    loadingAnimations={loadingAnimations}
                    videoMaterials={videoMaterials}
                    textPosition={textPosition}
                    onFormChange={handleFormChange}
                    onTextColorChange={setTextColor}
                    onBorderColorChange={setBorderColor}
                    onBackgroundColorChange={setBackgroundColor}
                    onIntroAnimationChange={setIntroAnimation}
                    onOutroAnimationChange={setOutroAnimation}
                    onLoopAnimationChange={setLoopAnimation}
                    onVideoMaterialsChange={setVideoMaterials}
                    onScreenAdapt={handleScreenAdapt}
                    onAutoSave={handleVideoMaterialAutoSave}
                    onTextPositionChange={handleTextPositionChange}
                  />
                </div>

                <Button
                  type="default"
                  size="small"
                  onClick={() => setDrawerVisible(false)}
                  style={{ marginTop: "12px" }}
                >
                  关闭配置面板
                </Button>
              </>
            )}
          </div>
        </Drawer>

        {/* 移动端悬浮按钮 */}
        <FloatButton.Group
          trigger="hover"
          type="primary"
          style={{
            right: 24,
            display: window.innerWidth < 1200 ? "block" : "none",
          }}
          icon={<SettingOutlined />}
        >
          <FloatButton
            icon={<MenuOutlined />}
            tooltip="项目配置"
            onClick={() => setDrawerVisible(true)}
          />
          <FloatButton
            icon={<QuestionCircleOutlined />}
            tooltip="使用教程"
            onClick={() => setShowTour(true)}
          />
        </FloatButton.Group>

        {/* 引导教程 */}
        <TourGuide
          showTour={showTour}
          tourStep={tourStep}
          tourSteps={tourSteps}
          onSkipTour={handleSkipTour}
          onNextStep={handleNextStep}
          onPrevStep={handlePrevStep}
        />

        {/* 响应式样式 */}
        <style>{`
        @media (max-width: 1200px) {
          .ant-col-xs-0 {
            display: none !important;
          }
          
          .ant-col-xs-24 {
            width: 100% !important;
          }
        }
        
        @media (max-width: 768px) {
          .ant-row {
            margin: 0 !important;
          }
          
          .ant-col {
            padding: 0 8px !important;
          }
        }

        /* 防止布局异常 */
        .ant-card {
          height: 100% !important;
          overflow: hidden !important;
        }

        .ant-card-body {
          overflow-y: auto !important;
          overflow-x: hidden !important;
        }
      `}</style>
      </div>
    );
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {/* 项目头部 */}
      <ProjectHeader
        ref={projectHeaderRef}
        userId={userId}
        onShowTour={() => setShowTour(true)}
      />

      {/* 自动保存指示器 */}
      <AutoSaveIndicator status={autoSaveStatus} />

      {/* 主要内容区域 */}
      <div style={{ flex: 1, overflow: "hidden" }}>
        {renderUserCustomConfigPanel()}
      </div>

      {/* 模板列表 */}
      <div style={{ flex: 1, padding: "16px" }}>
        <div style={{ borderBottom: "1px solid #d9d9d9" }}>
          <h2>优秀模板</h2>
        </div>
        <div>
          <TemplateList />
        </div>
      </div>
    </div>
  );
};

export default CreateProject;
